<template>
  <div id="app">
    <h1>App</h1>
    <!-- 传递给子组件的数组也是被这个组件依赖的，他会重新渲染这个整个组件 -->
    <!-- show 为false时，变化count不会触发组件的重新渲染，因为show从true变化为false，render函数重新运行，但是count并没有被收集依赖 -->
    <A v-if="show" :count="count" />
    <button @click="count++">increase</button>

    <!-- 组件销毁的情况 -->
     <!-- 
        App beforeUpdate
        A beforeDestroy
        B beforeDestroy
        B destroyed
        A destroyed
        App updated
     -->

     <!-- 
      再点击
      App beforeUpdate
      A beforeCreate
      A created
      A beforeMount
      B beforeCreate
      B created
      B beforeMount
      B mounted
      A mounted
      App updated
     
     
     -->
    <button @click="show = !show">toggle</button>
  </div>
</template>

<script>
import A from "./A.vue";

export default {
  components: { A },
  data() {
    return {
      show: true,
      count: 0,
    };
  },
  beforeCreate() {
    console.log("App beforeCreate");
  },
  created() {
    console.log("App created");
  },
  beforeMount() {
    console.log("App beforeMount");
  },
  mounted() {
    console.log("App mounted");
  },
  beforeUpdate() {
    console.log("App beforeUpdate");
  },
  updated() {
    console.log("App updated");
  },
  beforeDestroy() {
    console.log("App beforeDestroy");
  },
  destroyed() {
    console.log("App destroyed");
  },
};
</script>
